import React, {useState, useEffect, useRef, memo, useCallback} from "react";
import { IconClose, IconPlus, IconArrowLeft, IconArrowRight } from 'artemis-icon'
import './StyleGrid.less'
import { TextPrivate, AreaPrivate, SelectPrivate, Option, NumberPrivate, TabsPrivate } from './index';
import { wrapEvent } from './wrap';


export const TabPane = memo(function ({ children }) {
  return <>{ children }</>
})

console.log(IconClose)
export default memo(function ({ children }) {
  const [visible, setVisible] = useState(0)

  console.log('--------------- onAddClick')
  return (
    <div className="tabs">
      <div className="tabs-header row">
        <div className="header-content">
          <div className="header-content-inner">
            {
              Array.isArray(children) ? children.map((item, index) => {
                return (
                  <div
                    key={index}
                    className={`tabs-title flex-center ${index === visible ? 'title-active' : ''}`}
                    onClick={() => setVisible(index)}
                  >
                    { item.props.title }
                  </div>
                )
              }) : (
                <div className={`tabs-title flex-center title-active`}>
                  { children.props.title }
                </div>
              )
            }
          </div>
        </div>
      </div>
      <div className="tabs-body">
        {
          Array.isArray(children) ? children.map((item, index) => {
            return (
              <div
                key={index}
                className={`tab-item ${index === visible ? 'tab-active' : ''}`}
              >
                { item }
              </div>
            )
          }) : (
            <div className="tab-item tab-active">
              { children }
            </div>
          )
        }
      </div>
    </div>
  )
})

export const AddSelect = memo(function ({ children, data, title, onChange, renderProps }) {
  const [visible, setVisible] = useState(0)
  const [more, setMore] = useState(false)
  const [scrollLeft, setScrollLeft] = useState(0)
  const [length, setLength] = useState(1)
  const Text = useCallback(TextPrivate as any, [] as any)
  const Number = useCallback(NumberPrivate as any, [] as any)
  const Select = useCallback(SelectPrivate as any, [] as any)
  const Tabs = useCallback(TabsPrivate as any, [] as any)
  const box = useRef()
  const inner = useRef()
  const __box = box.current
  const __inner = inner.current


  useEffect(() => {
    // console.log('---------------', ref)
    // console.log('---------------', __inner.scrollWidth, __inner.clientWidth, __inner.offsetWidth)
    // console.log('---------------', __box.scrollWidth, __box.clientWidth, __box.offsetWidth)

    // ref.current.scrollLeft = 100
    setMore(inner.current.scrollWidth > box.current.scrollWidth)
    inner.current.scrollLeft = scrollLeft * inner.current.clientWidth;
  }, [scrollLeft] as any)

  const onLeftClick = () => {
    if (scrollLeft < 0) {
      setScrollLeft(0)
    } else {
      setScrollLeft(scrollLeft - 1)
    }
  }

  const onRightClick = () => {
    if (scrollLeft * inner.current.clientWidth < inner.current?.scrollWidth - inner.current.clientWidth) {
      setScrollLeft(scrollLeft + 1)
    }
  }

  const onAddClick = () => {
    // console.log('--------------- onAddClick')
    // setScrollLeft(scrollLeft + inner.current.clientWidth)
    setLength(length + 1)
    setMore(inner.current.scrollWidth > box.current.scrollWidth)
  }

  const __onChange = (index, value, filed) => {

  }
  // console.log('---------------', __inner?.scrollWidth, __inner?.clientWidth, __inner?.offsetWidth)
  // console.log('---------------', __box?.scrollWidth, __box?.clientWidth, __box?.offsetWidth)
  // console.log('--------------- onAddClick', children)

  return (
    <div className="tabs">
      <div className="tabs-header row">
        <div className="header-content" ref={box}>
          {
            more && (
              <div className="tabs-action flex-center" onClick={onLeftClick}>
                <IconArrowLeft className="action-icon action-left"/>
              </div>
            )
          }
          <div className="header-content-inner" ref={inner}>
            {
              (new Array(length).fill(null)).map((item, index) => {
                return (
                  <div
                    key={index}
                    className={`tabs-title flex-center ${index === visible ? 'title-active' : ''}`}
                    onClick={() => setVisible(index)}
                  >
                    { title + (+index + 1) }
                    {
                      index > 0 && (
                        <div className="tabs-title-action">
                          <IconClose className="action-icon action-remove"/>
                        </div>
                      )
                    }
                  </div>
                )
              })
            }
          </div>
          {
            more && (
              <div className="tabs-action flex-center" onClick={onRightClick}>
                <IconArrowRight className="action-icon action-right"/>
              </div>
            )
          }
        </div>
        <div className="header-action">
          <IconPlus className="action-icon action-add" onClick={onAddClick}/>
        </div>
      </div>
      <div className="tabs-body">
        {
          data.map((item, index) => {
            // children.props.index_index = index;
            switch (item.type) {
              case 'text': {
                return (
                  <Text
                    key={index}
                    label={item.label}
                    field={item.field}
                    onChange={(event) => __onChange(index, event.target.value, item.field)}
                  />
                )
              }
              case 'number': {
                return (
                  <Number
                    key={index}
                    label={item.label}
                    field={item.field}
                  />
                )
              }
              case 'select': {
                return (
                  <Select
                    key={index}
                    label={item.label}
                    field={item.field}
                  >
                    {
                      item.data.map((item, index) => (
                        <Option
                          key={index}
                          value={item.value}
                        >
                          {item.label}
                        </Option>
                      ))
                    }
                  </Select>
                )
              }
              case 'area': {
                return (
                  <Text
                    key={index}
                    label={item.label}
                    field={item.field}
                    value={item.value}
                  />
                )
              }
              case 'boolean': {
                return (
                  <Text
                    key={index}
                    label={item.label}
                    field={item.field}
                    value={item.value}
                  />
                )
              }
            }
            return (
              <div
                key={index}
                className={`tab-item ${index === visible ? 'tab-active' : ''}`}
              >
                { children }
              </div>
            )
          })
        }
      </div>
    </div>
  )
})